<template>
	<view>
		<!-- #ifndef H5 -->
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="content">{{detail?detail.name:'拼团详情'}}</block>
		</cu-custom>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="cu-bar fixed" :class="scrollTop > 300?'bg-white':'vtop'" :style="[{height:CustomBar + 'px'}]">
			<view class="action " @tap="BackPage">
				<text class="cuIcon cuIcon-back"></text>
			</view>
			<view class="content ">
				商品详情
			</view>
			<view class="action">
				<text class="cuIcon cuIcon-share" @tap="showShare" v-if="!error && detail"></text>
				
			</view>
		</view>
		<!-- #endif -->
		<block v-if="error">
			<view class="text-center errorview">
				<view>
					<view class="text-gray text-lg">{{meal_mess}}</view>
					<view class="cu-btn round margin-top" :class="'line-'+theme">返回</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="product-swiper relative" :style="'height:'+swiperHeight+'px;'">
				<!-- #ifdef MP-WEIXIN -->
				<view class="absolute vtop">
					<view class="action">
						<button class="sharebtn" open-type="share" v-if="!error && detail">
							<text class="cuIcon cuIcon-share"></text>
						</button>
						<text class="cuIcon cuIcon-more margin-left" @tap="showFastModal"></text>
					</view>
				</view>
				<!-- #endif -->
				<swiper class="screen-swiper" :indicator-dots="false" :autoplay="true" interval="5000" duration="500" @change="swiperChannelHandle"
				 v-if="detail" :style="'height:'+swiperHeight+'px;'">
					<swiper-item v-for="(item,index) in detail.covers" :key="index">
						<image :src="item" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
				<view class="absolute swiper-dot-view text-white" v-if="detail">
					{{swiperCurrent+1}}/{{detail.covers.length}}
				</view>
			</view>
			<block v-if="detail">
				<view class="flex space-between padding" style="background-color: #f94222;color: #ffffff;">
					<view class="w100 ">
						<view class="text-price text-xl text-bold">{{detail.price}}</view>
						<view class="">请在下方选购 {{detail.price}}元以上商品</view>
					</view>
					<view class="margin-left text-right">
					</view>
				</view>
				<view class="market-name-box">
					<view class="title-desc">
						<view class="title-box">
							
							<text class="title">{{detail.name}}</text>
							
						</view>
						
					</view>
					<text @tap="showShare" style="width: 30px;float: right;background-color: #C1A061;color: #ffffff;font-size: 12px;text-align: center;" >分享好友</text>
					
				</view>
				
			</block>
			<block v-if="detail && detail.meal">
				<block v-for="(value,i) in detail.meal" :key="i">
					<view class="bg-white space-between padding margin-top align-center">
						<view class="cu-avatar default-bg lg round">
							<image :src="value.product.picture" mode="aspectFill"></image>
						</view>
						<view class="w100 margin-left-sm">
							<view class="text-lg">{{value.product.name}}</view>
							<view class="cu-tag sm margin-top-xs">
								<view class="text-price text-xl text-bold">{{value.product.price}}</view>
							</view>
						</view>
						<view>
							<text class="cuIcon cuIcon-rounddown text-blue default" v-if="p_team[i] && p_team[i].number > 0" @tap="delCart(i)"></text>
							<text class="text-lg padding-lr-sm" v-if="p_team[i] && p_team[i].number> 0">{{p_team[i].number}}</text>
							<text class="cuIcon cuIcon-roundaddfill text-blue default" @tap="addCart(i)"></text></view>
					</view>
				</block>
				
			</block>
			<view class="bg-white margin-top">
				<view class="overflow">
					<view class="text-center margin-tb text-lg text-black">—— 套餐详情 ——</view>
					<view class="content" v-if="detail">
						<mp-html :content="detail.content"></mp-html>
					</view>
				</view>
			</view>
			
			
			

			<view class="main-ctr">
				<view class="blackbg round  text-white" @tap="onTop" v-if="scrollTop > 300">
					<text class="cuIcon-top"></text>
				</view>
			</view>

			<view class="cu-bar bg-white tabbar  shop  foot" v-if="detail">
				<view class="action text-black" @tap="goPage('/pages/shop/index')">
					<view class="cuIcon-home"></view> 首页
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button class="action" open-type="contact">
					<view class="cuIcon-service text-black">
						
					</view>
					客服
				</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<button class="action" @tap="openServiceModal">
					<view class="cuIcon-service text-black">
						<!-- <view class="cu-tag badge"></view> -->
					</view>
					客服
				</button>
				<!-- #endif -->
				
				<block >
					<view class="btn-group  margin-left" >
						总价：{{my_pay_money}}
					</view>
					<view class="btn-group  margin-left" v-if="detail ">
						<block v-if="my_pay_money<detail.price">
							<button class="cu-btn round light w100 margin-right-sm" style="background-color: #7e7a7a;color: #ffffff;" @tap="closebuy">立即购买</button>
						</block>
						<block v-else>
							<button class="cu-btn round light w100 margin-right-sm" style="background-color: #f94222;color: #ffffff;"  @tap="buy">立即购买</button>
						</block>
						
					</view>
					<view  class="btn-group  margin-left" v-else>
						<view class="cu-btn round light submit bg-yellow" style="height: 55px;color: #333333;">购买上限</view>
					</view>
					
					
				</block>
				
			</view>
		</block>

		
		
		<ShareView ref="ShareView"></ShareView>
		<serviceView ref="serviceView"></serviceView>
		<Foot></Foot>
	</view>
</template>

<script>
	
	import serviceView from '@/components/default/serviceView.vue'
	import ShareView from '@/components/default/ShareView.vue'
	import Foot from '@/components/default/foot.vue'
	import mpHtml from '@/components/mp-html/mp-html.vue';
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			ShareView,
			serviceView,
			Foot,
			mpHtml,
		},
		computed: {
			...mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		},
		data() {
			return {
				id: 0,
				cartProductNumber:0,
				config: null,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				detail: null,
				swiperHeight: 0,
				swiperCurrent: 0,
				scrollTop: 0,
				meal_mess:'套餐有误',
				error: false,
				member: null,
				hasMore:true,
				loading:false,
				page:1,
				param: {
					num: 1,
					sku_id: 0,
				},
				p_team:[],
				my_pay_money:0,
				merchant_id:0,
			};
		},
		onShow() {
			
			this.$common.getMember().then((member) => {
				this.member = member
				uni.startPullDownRefresh({})
				
			})
			this.modalName = ''
			
		},
		onLoad(option) {
			this.id = option.id
			if (!this.id) {
				this.$common.showErrorModal('参数有误')
			}
			if (option.share_id) {}
			this.$common.rmCache('config')
			this.$common.getConfig().then((config) => {
				this.config = config
				this.$nextTick(function() {
					// uni.startPullDownRefresh({})
				})
			})
			this.getProduct()
			this.swiperHeight = this.windowWidth
			
		},
		
		onReady() {},
		methods: {
			addCart(i){
				this.p_team[i].number +=1
				this.my_pay_money  +=parseFloat(this.detail.meal[i].product.price)
				
			},
			delCart(i){
				this.p_team[i].number -=1
				this.my_pay_money  -=parseFloat(this.detail.meal[i].product.price)
				
			},
			closebuy(){
				if(parseFloat(this.my_pay_money)<parseFloat(this.detail.price)){
					this.$common.showError('购买价格不能低于'+this.detail.price)
					return
				}
			},
			buy(){
				if(parseFloat(this.my_pay_money)<parseFloat(this.detail.price)){
					this.$common.showError('购买价格不能低于'+this.detail.price)
					return
				}
				if(this.detail.p_level>0){
					if(this.member.current_level<2){
						this.$common.showError('请先成为会员')
						return
					}
				}
				if(this.detail.order_num>0){
					if(this.detail.order_num<=this.detail.order_count){
						this.$common.showError('该分类购买上限了')
						return
					}
				}
				if(this.detail.num>0)
				{
					if(this.detail.num<=this.detail.meal_count){
						this.$common.showError('购买上限了')
						return
					}
				}
				
				if(this.detail.stock<1){
					this.$common.showError('库存不足')
					return
				}
				
				var param = {
					sku_id: this.detail.id,
					num: 1,
					p_team:this.p_team,
				}
				console.log(param)
				let type='meal'
				let urlParams = "?type=" + type + "&merchant_id=" + this.merchant_id + "&data=" + decodeURIComponent(JSON.stringify(
					param))
					console.log(urlParams)
				uni.navigateTo({
					url: "/pages/shop/order/settle" + urlParams
				})
				
			},
			getProduct() {
				this.$http
					.get('marketing_product_meal_view', {
						id: this.id,
					})
					.then((response) => {
						uni.stopPullDownRefresh()
						var detail = response.data.data
						console.log(detail)
						detail.covers = detail.picture
						detail.content = detail.intro
						detail.content = this.$common.mathRichText(detail.content)
						this.detail = detail
						
						if(this.detail  && this.detail.meal.length>0 ){
							for(let k=0; k<this.detail.meal.length;k++){
								let p_numt={}
								 p_numt.number=0
								 p_numt.sku_id=this.detail.meal[k].product.id
								this.p_team[k]=p_numt
							}
						}
						console.log(this.p_team)
						this.$common.getMember(true).then((member) => {
							this.member = member
							if(this.member.nickname){
								var name =this.member.nickname + '-邀请您购买套餐产品'+detail.name
							}else{
								var name ='用户id:'+this.member.id + '-邀请您购买套餐产品'+detail.name
							}
							this.$jwx.readyShare(name,detail.name,detail.share_url,detail.picture)
						})
						
						

					})
					.catch((response) => {
						
						uni.stopPullDownRefresh()
						this.error = true
						this.meal_mess=response.data.message
					})
			},
			openServiceModal() {
				this.$refs.serviceView.show()
			},
			showShare() {
				if (this.detail) {
					this.$refs.ShareView.show({
						type: 'meal',
						id: this.detail.id,
						thumb:this.detail.picture,
						name: this.detail.name,
						price: this.detail.price,
						share_url: this.detail.share_url,
						member_id: this.member.id,
						member_name: this.member.nickname,
						member_head: this.member.head_portrait,
						reget: true
					})
				}
			},
			
			onTop: function(e) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			BackPage() {
				uni.navigateBack({})
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop
			},
			
			goStore(merchant) {
				if (merchant.type == 1) {
					uni.navigateTo({
						url: "/merchantPackages/pages/store?id=" + merchant.id
					})
				}
			},
			
			
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
			}
			let path = '/pages/shop/marketing/wholesale?id=' + this.id
			if (this.member) path += "&share_id=" + this.member.id
			return {
				title: this.detail.name,
				imageUrl: this.detail.picture,
				path: path
			}
		},
		onPullDownRefresh() {
			this.getProduct()
		},
		
	}
</script>

<style>
	.page_footer {
		position: fixed;
		/* width: 100%; */
		/* left: 0; */
		right: 0;
		bottom: 20%;
		z-index: 9999999;
	}
	.page_footer.hidden{
		display: none;
	}
	.djs-color{
		color: #ffffff!important;
		padding: 2px!important;
		background: rgba(255,255,255, 0.3)!important;
	}
	.vtop {
		box-shadow: none;
		background-color: none;
	}

	.product-swiper .vtop {
		right: 20rpx;
		top: 20rpx;
		z-index: 65;
	}

	.vtop .cuIcon {
		background-color: rgb(0, 0, 0, 0.5);
		color: #FFF;
		border-radius: 50%;
		padding: 10rpx 12rpx;
	}

	.vtop .content {
		display: none;
	}

	.swiper-dot-view {
		right: 0;
		bottom: 10rpx;
		background-color: rgb(0, 0, 0, 0.3);
		border-radius: 20rpx 0 0 20rpx;
		padding: 5rpx 20rpx;
	}

	.share {
		border-radius: 0;
		font-size: 30rpx;
		padding: 0;
		background: none;
	}

	.share::after {
		display: none;
	}

	.product-name {
		line-height: 45rpx;
		text-align: justify;
	}

	.heightover {
		height: 100vh;
		overflow: hidden;
	}

	.border-radius-top {
		border-radius: 30rpx 30rpx 0 0 !important;
	}

	.color-view {
		width: 80rpx;
		height: 40rpx;
	}

	.cu-bar.tabbar.shop .action {
		width: 100upx;
	}

	.round-left {
		border-radius: 40rpx 0 0 40rpx;
	}

	.round-right {
		border-radius: 0 40rpx 40rpx 0;
	}

	.main-ctr {
		position: fixed;
		z-index: 99;
		bottom: 140rpx;
		right: 30rpx;
	}

	.blackbg {
		background-color: rgb(0, 0, 0, 0.5);
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.errorview {
		height: 50vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.menu .content {
		width: 100rpx;
		min-width: 100rpx;
	}

	.text-justify {
		text-align: justify;
	}

	.sharebtn {
		background-color: unset;
		font-size: unset;
		padding: 0;
		display: inline;
	}

	.sharebtn::after {
		content: unset;
	}
</style>

<style>
	.market-name-box{
		padding:  18rpx 30rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.market-name-box .title-desc{
		flex: 1;
	}
	.title-desc .title-box{
		display: flex;
		align-items: center;
	}
	.title-desc .title-box .round-spec{
		flex-shrink: 0;
		padding: 0 20rpx;
		height: 40rpx;
		line-height: 44rpx;
		text-align: center;
		background-color: #FEED8C;
		border-radius: 15rpx;
		font-size: 24rpx;
		color: #000000;
		margin-right: 10rpx;
	}
	.title-desc .title-box .title{
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.title-desc .description{
		font-size: 20rpx;
		color: #000000;
		line-height: 34rpx;
		opacity: 0.64;
	}
	.market-name-box .sold-share{
		width: 180rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}
	.sold-share .solid{
		font-size: 22rpx;
		color: #000000;
		line-height: 15rpx;
		opacity: 0.8;
	}
	.sold-share .solid text{
		margin: 0 10rpx;
	}
	.sold-share .share{
		margin-top: 36rpx;
		width: 124rpx;
		height: 124rpx;
		background-color: #C3A060;
		border-radius: 10rpx;
		padding: 30rpx;
		text-align: center;
		line-height: 34rpx;
		font-size: 26rpx;
		color: #FFFFFF;
	}
</style>

<style>
	.picker-box{
		padding: 0 30rpx;
		background-color: #FFFFFF;
	}
	.picker-line{
		padding: 20rpx 0;
		border-bottom: 1rpx solid #EAEAEA;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #707070;
	}
	.picker-line .name{
		margin: 0 25rpx;
		font-size: 26rpx;
		color: #3C3A3A;
		opacity: 0.70;
	}
	.picker-line .content{
		flex: 1;
		font-size: 28rpx;
		font-weight: bold;
		color: #484343;
		opacity: 0.70;
	}
	
	.group-buy-box{
		background-color: #FFFFFF;
		padding: 50rpx 30rpx;
	}
	.group-buy-box .total-detail{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.group-buy-box .total-detail .num{
		font-size: 38rpx;
		font-weight: bold;
		color: #990000;
		margin-right: 20rpx;
	}
	.group-buy-box .total-detail .note{
		flex: 1;
		font-size: 28rpx;
		color: #000000;
	}
	.group-buy-box .total-detail .status{
		font-size: 26rpx;
		color: #000000;
	}
	.group-buy-box .record-list{
		margin-top: 30rpx;
	}
	.record-list swiper{
		height: 80rpx;
	}
	.record-list swiper-item{
		height: 100%;
	}
	.record-list .record{
		height: 100%;
		display: flex;
		align-items: center;
	}
	.record-list .record image{
		width: 80rpx;
		height: 80rpx;
		border: 1rpx solid #EAEAEA;
		margin-right: 20rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}
	.record-list .record text{
		font-size: 34rpx;
		color: #000000;
		line-height: 34rpx;
	}
</style>

<style>
	.evaluate-line{
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #707070;
	}
	.evaluate-line .name{
		font-size: 28rpx;
		color: #000000;
	}
	.evaluate-box{
		margin-top: 10rpx;
		background-color: #FFFFFF;
		padding: 10rpx 30rpx 40rpx;
	}
	.evaluate-box .top-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.top-title .title{
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.top-title .more{
		font-size: 26rpx;
		color: #999999;
	}

	.evaluate-item{
		padding-top: 30rpx;
	}
	.evaluate-item .user-star{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.user-star .user-avatar{
		border: 1rpx solid #EAEAEA;
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		margin-right: 12rpx;
		flex-shrink: 0;
	}
	.user-star .user-name{
		flex: 1;
		font-size: 28rpx;
		color: #999999;
	}
	.user-star .star{
		width: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.user-star .star image{
		width: 17rpx;
		height: 17rpx;
	}
	
	.evaluate-item .content{
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #333333;
		line-height: 40rpx;
	}
	
	.evaluate-item .thumbs{
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}
	.evaluate-item .thumbs image{
		width: 144rpx;
		height: 154rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		margin-right: 36rpx;
	}
	.evaluate-item .thumbs image:nth-child(4n){
		margin-right: 0;
	}
</style>

